<template>
  <el-select
    v-model="selected"
    placeholder="请选择学科"
    clearable
    @change="onchange"
    :disabled="disabled"
  >
    <el-option
      v-for="item in items"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import _api from "@/common/api/subject";

export default {
  props: {
    value: {
      type: Number | null,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  watch: {
    value() {
      this.selected = this.value;
    },
  },

  data() {
    return {
      items: [],
      selected: this.value,
    };
  },

  methods: {
    onchange(value) {
      this.$emit("input", value);
    },

    async getItems() {
      const result = await _api.getListAsync({
        page_size: 999,
      });

      this.items = result.data.map((m) => ({ id: +m.id, name: m.name }));
    },
  },

  mounted() {
    this.getItems();
  },
};
</script>

<style>
</style>